{! extends "base.html" !}

{! block hscript !}
	<script type="text/javascript" src="{{site.url}}js/jquery.min.js"></script>
    <script type="text/javascript" src="{{site.url}}js/jquery.form.js"></script>
{! endblock !}

{! block nav !}
			<a href="{{site.adminUrl}}category">All Categories</a>
			{%if category %}<a href="{{site.adminUrl}}category/create">Add new</a>{%endif%}
{! endblock !}

 {! block content !}
<form action="{{site.adminUrl}}category/{%if category%}update{%else%}add{%endif%}" method="post" id="cateForm">
   <div class="wrap">
      <h2>{%if category %}Edit category{%else%}Add category{%endif%}</h2>
      <div id="poststuff">

<div id="submitlink" class="submitbox">

<div id="previewview">
</div>

<div class="inside">
<p>&nbsp;</p>
</div>

<p class="submit">
<input type="submit" tabindex="4" value="Save" name="" class="button button-highlighted"/>
</p>

</div>

<div id="post-body">
<div class="stuffbox">
<h3>Name</h3>
<div class="inside">
	<input type="text" id="name" value="{{category.name}}" tabindex="1" size="30" name="name"/><br/>
    The name is used to identify the category almost everywhere, for example under the post or in the category widget.
</div>
</div>

<div class="stuffbox">
<h3>Slogan</h3>
<div class="inside">
	<input type="text" id="slogan" value="{{category.slogan}}" tabindex="2" size="30" name="slogan"/><br/>
    The 'slogan' is the URL-friendly version of the name. It is usually all lowercase and contains only letters, numbers, and hyphens.
</div>
</div>
<div class="stuffbox">
<h3>Order</h3>
<div class="inside">
	<input type="text" id="order" value="{{category.order}}" size="30" name="order" tabindex="3"/><br />
</div>
</div>

<input type="hidden" value="{{category.id}}" name="id"/>

</div>
</div>

   </div>
   </form>
 {! endblock  !}
 
 
 {! block bscript !}    
<script type="text/javascript">
    $(document).ready(function() { 
    	var options = {
    	    	dataType: 'json',
    	    	success : function(data) {
	    				var hmd = $("#hiddenMessage");
	    				if (data.type == "error") {
	    					hmd.html("<div class='error'>" + data.message + "</div>");
	    				} else {
	    					hmd.html("<div class='info'>" + data.message + "</div>");
	    					{% if category|not %}
	    					$("#name").val('');
	    					$("#slogan").val('');
	    					$("#order").val('');
	    					{% endif %} 
	    				}
	    				hmd.show().focus();
    				},
    	};
    	$("#cateForm").ajaxForm(options);
    });
</script>
{! endblock !}